<script setup lang="ts">
import BtnWithDropdown from "@renderer/view/components/components/BtnWithDropdown.vue";
import { EnumMeasureSubType, EnumOpType } from "@renderer/assets/types";
import { computed, inject } from "vue";
import { useUserOpStore } from "@renderer/store/pinia/userOp";
import { getActiveTabViewOp } from "@renderer/view/hooks/common";

const EnumMeasureIcon = {
    defaultIcon:  `mdi-map-marker-distance`,
    lineIcon:  "mdi-vector-line",
    rectIcon: 'mdi-vector-rectangle',
    angleIcon: 'mdi-angle-acute',
    ellipseIcon: 'mdi-ellipse-outline',
}

const {
  activeViewRef: activeView
} = getActiveTabViewOp()

const items = [
  { type: EnumMeasureSubType.line, icon: EnumMeasureIcon.lineIcon },
  { type: EnumMeasureSubType.angle, icon: EnumMeasureIcon.angleIcon },
  { type: EnumMeasureSubType.rect, icon: EnumMeasureIcon.rectIcon },
  { type: EnumMeasureSubType.ellipse, icon: EnumMeasureIcon.ellipseIcon },

];
const opStore = useUserOpStore();
const activeIcon = computed(() => {
  let ans = ''
  if (!(activeView.value.viewId in opStore.viewOpObj)){
    return ans
  }
   switch (opStore.viewOpObj[activeView.value.viewId].activeOp.subType){
     case EnumMeasureSubType.line:
       ans =  EnumMeasureIcon.lineIcon
       break;
     case  EnumMeasureSubType.rect:
       ans = EnumMeasureIcon.rectIcon
       break;
     case   EnumMeasureSubType.angle:
       ans = EnumMeasureIcon.angleIcon
       break;
     case  EnumMeasureSubType.ellipse:
       ans = EnumMeasureIcon.ellipseIcon
       break;
     default:
       ans = EnumMeasureIcon.defaultIcon
       break;
   }
   return ans
})

</script>

<template>
  <btn-with-dropdown
    tips="measure"
    :icon="activeIcon"
    :op-type="{
      type: EnumOpType.measure,
      subType: EnumMeasureSubType.none,
    }"
  >
    <template #dropdownSlot="{ handleChooseMenu }">
      <v-list density="compact">
        <v-list-item
          v-for="(item, index) in items"
          :key="index"
          :value="index"
          @click="handleChooseMenu(item)"
        >
          <template v-slot:prepend>
            <v-icon :icon="item.icon"></v-icon>
          </template>

          <v-list-item-title v-text="item.type"></v-list-item-title>
        </v-list-item>


        <v-divider :thickness="4"></v-divider>

        <v-list-item disabled>
          <template v-slot:prepend>
            <v-icon icon="mdi-content-copy"></v-icon>
          </template>
          <v-list-item-title >复制</v-list-item-title>
        </v-list-item>

        <v-list-item  disabled>
          <template v-slot:prepend>
            <v-icon icon="mdi-content-paste"></v-icon>
          </template>
          <v-list-item-title >粘贴</v-list-item-title>
        </v-list-item>

        <v-divider :thickness="4"></v-divider>
        <v-list-item disabled>
           <template v-slot:prepend>
             <v-icon icon="mdi-trash-can-outline"></v-icon>
           </template>
          <v-list-item-title >删除所选</v-list-item-title>
        </v-list-item>

        <v-list-item disabled>
          <template v-slot:prepend>
            <v-icon icon="mdi-delete-alert-outline"></v-icon>
          </template>
          <v-list-item-title >删除所有</v-list-item-title>
        </v-list-item>
      </v-list>
    </template>
  </btn-with-dropdown>
</template>

<style scoped></style>
